import React ,{Component} from 'react';
import style from './css/Detail.css';
import OtherP from './OtherP';

class Detail extends Component{
    DetailChange(num){
        var h=document.getElementById(num+3);
        if(num==1){
            document.getElementById(1).className=style.select;
            document.getElementById(2).className=style.noselect;
            document.getElementById(3).className=style.noselect;
            document.getElementById(4).style.display='block';
            document.getElementById(5).style.display='none';
            document.getElementById(6).style.display='none';
            document.getElementById(style.tianchong).style.height=h.offsetHeight+'px';
        }
        else if(num==2){
            document.getElementById(1).className=style.noselect;
            document.getElementById(2).className=style.select;
            document.getElementById(3).className=style.noselect;
            document.getElementById(5).style.display='block';
            document.getElementById(4).style.display='none';
            document.getElementById(6).style.display='none';
            document.getElementById(style.tianchong).style.height=h.offsetHeight+'px';
        }
        else{
            document.getElementById(1).className=style.noselect;
            document.getElementById(2).className=style.noselect;
            document.getElementById(3).className=style.select;
            document.getElementById(6).style.display='block';
            document.getElementById(5).style.display='none';
            document.getElementById(4).style.display='none';
            document.getElementById(style.tianchong).style.height = h.offsetHeight+1 + 'px';
        }
    }
    constructor(props){
        super(props)
        this.state={
            img1:"img/TB2QsDanpXXXXcYXpXXXXXXXXXX_!!207592.jpg", img2:"img/TB2ijVztpXXXXaEXXXXXXXXXXXX_!!207592.jpg",
            img3:"img/TB2ldYfmFXXXXcqXpXXXXXXXXXX_!!207592.jpg", img4:"img/TB2bbwKspXXXXcvXXXXXXXXXXXX_!!207592.jpg",
            web1:"#",web2:"#",web3:"#",web4:"#",price1:"159.00",price2:"129.00",price3:"103.00",price4:"159.00",
            name1:"有人穿的裤子",name2:"也是有人穿的裤子",name3:"绿色的裤子",name4:"两条裤子",
            num1:1,num2:2,num3:3,num4:4
        }
    }
    PicLunBo(n){
        var s,
            item=[["#","img/TB2QsDanpXXXXcYXpXXXXXXXXXX_!!207592.jpg","159.00","有人穿的裤子"],
            ["#","img/TB2ijVztpXXXXaEXXXXXXXXXXXX_!!207592.jpg","129.00"," 也是有人穿的裤子"],
            ["#","img/TB2ldYfmFXXXXcqXpXXXXXXXXXX_!!207592.jpg","103.00","绿色的裤子"],
            ["#","img/TB2bbwKspXXXXcvXXXXXXXXXXXX_!!207592.jpg","159.00","两条裤子"],
            ["#","img/TB2lpdUlFXXXXa4XXXXXXXXXXXX_!!207592.jpg","119.00","破洞"],
            ["#","img/TB2QiO0al4lpuFjy1zjXXcAKpXa_!!207592.jpg","56.00","蓝色裤子"],
            ["#","img/TB2wfJYlFXXXXaxXXXXXXXXXXXX_!!207592.jpg","47.00","拉链？"],
            ["#","img/TB1OcJwMXXXXXbjXFXXXXXXXXXX_!!0-item_pic.jpg","129.00","牛仔裤"],
            ["#","img/QQ截图20161215000103.png",'0.00',"二维码"],
            ["#","img/QQ截图20161215125948.png","56.15","没图了"],
            ["#","img/20161209211507.png","12.5","真的没图了"],
            ["#","img/QQ截图20161212002938.png","125.00","淘宝券"]];
        if(n==1) s=4;
        else s=8;
        this.setState({
            num1:(this.state.num1+s)%12, img1:item[this.state.num1][1], price1:item[this.state.num1][2], name1:item[this.state.num1][3],
            num2:(this.state.num2+s)%12, img2:item[this.state.num2][1], price2:item[this.state.num2][2], name2:item[this.state.num2][3],
            num3:(this.state.num3+s)%12, img3:item[this.state.num3][1], price3:item[this.state.num3][2], name3:item[this.state.num3][3],
            num4:(this.state.num4+s)%12, img4:item[this.state.num4][1], price4:item[this.state.num4][2], name4:item[this.state.num4][3]
        })
    }
    render(){
        return(
            <div id={style.overall}>
                <div id={style.bd}>
                    <div id={style.search}>
                        <input type="text" name="q" size="5" defaultValue="搜本店" />
                        <input type="submit" className={style.button} value="Search"/>
                    </div>
                    <ul>
                        <li className={style.select} id="1" onClick={this.DetailChange.bind(this,1)}>
                            宝贝详情
                        </li>
                        <li className={style.noselect} id="2" onClick={this.DetailChange.bind(this,2)}>
                            累计评论
                        </li>
                        <li className={style.noselect} id="3" onClick={this.DetailChange.bind(this,3)}>
                            专享服务
                        </li>
                    </ul>
                    <div id={style.Phone}>
                        手机购买<img src="img/QQ截图20161215000013.png" />
                        <div>
                            <img src="img/QQ截图20161215000103.png" />
                        </div>
                    </div>
                </div>
                <div id={style.CeBian}>
                    <div id={style.CeBian_ShouCang}>
                        <a href="#">
                            <img src="img/QQ截图20161215125948.png"/>
                        </a>
                        <h4>客服中心</h4>
                        <h5>联系客服<a href="#"><img src="img/阿里旺旺.png"/></a></h5>
                        <h4>OPENING×在线时间</h4>
                        <h5>周一至周日 am9:00-pm24:00</h5>
                    </div>
                    <div id={style.CeBian_Menu}>
                        <h3>宝贝分类</h3>
                        <ul>
                            <li><a href="#">查看所有宝贝</a></li>
                            <li className={style.n}><a href="#">最新上架</a>
                                <ul>
                                    <li><a href="#">冬新品</a></li>
                                    <li><a href="#">秋新品</a></li>
                                    <li><a href="#">11月新品</a></li>
                                    <li><a href="#">10月新品</a></li>
                                    <li><a href="#">9月新品</a></li>
                                    <li><a href="#">8月新品</a></li>
                                    <li><a href="#">7月新品</a></li>
                                    <li><a href="#">6月新品</a></li>
                                </ul>
                            </li>
                            <li> <a href="#">T恤</a></li>
                            <li><a href="#">衬衫</a></li>
                            <li><a href="#">卫衣</a></li>
                            <li><a href="#">毛衣/针织衫</a></li>
                            <li><a href="#">外套</a></li>
                            <li><a href="#">夹克</a></li>
                            <li><a href="#">皮衣</a></li>
                            <li><a href="#">毛呢大衣</a></li>
                            <li><a href="#">棉衣/羽绒服</a></li>
                            <li><a href="#">长裤</a></li>
                            <li><a href="#">九分裤/短裤</a></li>
                            <li><a href="#">鞋/包/小物</a></li>
                            <li><a href="#">清仓折扣区</a></li>
                        </ul>
                    </div>
                </div>
                <div className={style.MiddleF}>
                    <div className={style.MiddleF} id="4">
                        <div id={style.details}>
                            <ul>
                                <li title="长裤">裤长:&nbsp;长裤</li>
                                <li title="TOP61">货号:&nbsp;TOP61</li>
                                <li title="蓝色">颜色:&nbsp;蓝色</li>
                                <li title="M L XL 2XL">尺码:&nbsp;M L XL 2XL</li>
                                <li title="常规牛仔布">牛仔面料:&nbsp;常规牛仔布</li>
                                <li title="破洞">工艺处理:&nbsp;破洞</li>
                                <li title="Glad Youthful">品牌:&nbsp;Glad Youthful</li>
                                <li title="2016年">上市时间:&nbsp;2016年</li>
                                <li title="春季">适用季节:&nbsp;春季</li>
                                <li title="其他休闲">适用场景:&nbsp;其他休闲</li>
                                <li title="青年">适用对象:&nbsp;青年</li>
                                <li title="中腰">腰型:&nbsp;中腰</li>
                                <li title="小直脚">裤脚口款式:&nbsp;小直脚</li>
                                <li title="拉链">裤门襟:&nbsp;拉链</li>
                                <li title="水洗">洗水工艺:&nbsp;水洗</li>
                                <li title="修身小脚">款式版型:&nbsp;修身小脚</li>
                                <li title="青春流行">基础风格:&nbsp;青春流行</li>
                            </ul>
                        </div>
                        <h3>
                            <img src="img/QQ截图20161215104912.png"/>
                        </h3>
                        <h5>（均为手工测量 存在1-3cm左右误差属正常）</h5>
                        <h5>size （单位：cm）</h5>
                        <h5>M     裤长91    腰围76   臀围102     裤脚30</h5>
                        <h5>L     裤长93    腰围80   臀围106     裤脚31</h5>
                        <h5>XL    裤长95    腰围84   臀围110     裤脚32</h5>
                        <h5>XXL   裤长97    腰围88   臀围114     裤脚33</h5>
                        <h3>
                            <img src="img/QQ截图20161215121432.png"/>
                        </h3>
                        <img src="img/TB2ijVztpXXXXaEXXXXXXXXXXXX_!!207592.jpg" width="830"/>
                        <img src="img/TB2bbwKspXXXXcvXXXXXXXXXXXX_!!207592.jpg" width="830" />
                        <img src="img/TB2QsDanpXXXXcYXpXXXXXXXXXX_!!207592.jpg" width="830" />
                    </div>
                    <div className={style.Middle} id="5">
                        <div id={style.selection}>
                            <input type="radio" name="radiobutton"  /><label>全部</label>
                            <input type="radio" name="radiobutton"  /><label>图片</label>
                            <input type="radio" name="radiobutton"  /><label>追评</label>
                            <input type="radio" name="radiobutton" /><label>好评</label>
                            <input type="radio" name="radiobutton" /><label>差评</label>
                        </div>
                        <div className={style.comment}>
                            <div>
                                <img src="img/头像.png"/>
                                <h5>车**（匿名）</h5>
                            </div>
                            <p>晓伟师兄最帅！！！</p>
                            <h5>2016年12月16日 15:10</h5>
                        </div>
                        <div className={style.comment}>
                            <div>
                                <img src="img/头像.png"/>
                                <h5>车**（匿名）</h5>
                            </div>
                            <p>晓伟师兄最帅+1</p>
                            <h5>2016年12月16日 15:10</h5>
                        </div>
                        <div className={style.comment}>
                            <div>
                                <img src="img/头像.png"/>
                                <h5>车**（匿名）</h5>
                            </div>
                            <p>晓伟师兄最帅+2</p>
                            <h5>2016年12月16日 15:10</h5>
                        </div>
                    </div>
                    <div className={style.Middle} id="6">
                        <h4>卖家承诺以下服务</h4>
                        <div className={style.service}>
                            <img src="img/八天退货.png"/>
                            <h3>8天退货</h3>
                            <h5 className={style.h51}>退货条件：在商品签收8天内，商品包装完好、吊牌齐全、未洗涤，可提出退货申请。
                                <br/>邮费说明：包邮商品发货邮费卖家承担；非包邮商品发货邮费买家承担；退货邮费买家承担。
                            </h5>
                        </div>
                        <div className={style.service}>
                            <img src="img/消费者保障.png"/>
                            <h3>消费者保障服务</h3>
                            <h5 className={style.h52}>该卖家已缴纳 3000.0 元保证金。<br/>
                                在确认收货 15 天内，如有商品质量问题、描述不符或未收到货等，您有权申请退款或退货，来回邮费由卖家承担。
                            </h5>
                        </div>
                    </div>
                    <div>
                        <h4 id={style.header}>看了该宝贝的人还看了
                            <div onClick={this.PicLunBo.bind(this,1)}>
                                <img src="img/右箭头.png"/>
                            </div>
                            <div onClick={this.PicLunBo.bind(this,-1)}>
                                <img src="img/左箭头.png"/>
                            </div>
                        </h4>
                        <ul id={style.final}>
                            <li>
                                <OtherP website={this.state.web1} img={this.state.img1} price={this.state.price1} name={this.state.name1} num={this.state.num1} />
                            </li>
                            <li>
                                <OtherP website={this.state.web2} img={this.state.img2} price={this.state.price2} name={this.state.name2} num={this.state.num1}/>
                            </li>
                            <li>
                                <OtherP website={this.state.web3} img={this.state.img3} price={this.state.price3} name={this.state.name3} num={this.state.num1}/>
                            </li>
                            <li>
                                <OtherP website={this.state.web4} img={this.state.img4} price={this.state.price4} name={this.state.name4} num={this.state.num1}/>
                            </li>
                        </ul>
                    </div>
                </div>
                <div id={style.tianchong}></div>
            </div>
        )
    }
}

export default Detail